<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="lt-ie9"> <![endif]-->
<!--[if IE 9]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Nestable</title>
<style type="text/css">
.cf:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .cf {
	zoom: 1;
}

*:first-child+html .cf {
	zoom: 1;
}

html {
	margin: 0;
	padding: 0;
}

body {
	font-size: 100%;
	margin: 0;
	padding: 1.75em;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1 {
	font-size: 1.75em;
	margin: 0 0 0.6em 0;
}

a {
	color: #2996cc;
}

a:hover {
	text-decoration: none;
}

p {
	line-height: 1.5em;
}

.small {
	color: #666;
	font-size: 0.875em;
}

.large {
	font-size: 1.25em;
}
</style>
</head>
<body>

	<h1>Nestable</h1>

	<p>Drag &amp; drop hierarchical list with mouse and touch
		compatibility (jQuery plugin)</p>

	<p>
		<strong><a href="https://github.com/dbushell/Nestable">Code
				on GitHub</a></strong>
	</p>

	<menu id="nestable-menu">
		<button type="button" data-action="expand-all">Expand All</button>
		<button type="button" data-action="collapse-all">Collapse All</button>
	</menu>

	<div class="cf nestable-lists">

		<div class="dd" id="nestable">
			<ol class="dd-list">
				<li class="dd-item" data-id="1">
					<div class="dd-handle">Item 1</div>
				</li>
				<li class="dd-item" data-id="2">
					<div class="dd-handle">Item 2</div>
					<ol class="dd-list">
						<li class="dd-item" data-id="3"><div class="dd-handle">Item
								3</div></li>
						<li class="dd-item" data-id="4"><div class="dd-handle">Item
								4</div></li>
						<li class="dd-item" data-id="5">
							<div class="dd-handle">Item 5</div>
							<ol class="dd-list">
								<li class="dd-item" data-id="6"><div class="dd-handle">Item
										6</div></li>
								<li class="dd-item" data-id="7"><div class="dd-handle">Item
										7</div></li>
								<li class="dd-item" data-id="8"><div class="dd-handle">Item
										8</div></li>
							</ol>
						</li>
						<li class="dd-item" data-id="9"><div class="dd-handle">Item
								9</div></li>
						<li class="dd-item" data-id="10"><div class="dd-handle">Item
								10</div></li>
					</ol>
				</li>
				<li class="dd-item" data-id="11">
					<div class="dd-handle">Item 11</div>
				</li>
				<li class="dd-item" data-id="12">
					<div class="dd-handle">Item 12</div>
				</li>
			</ol>
		</div>

		<div class="dd" id="nestable2">
			<ol class="dd-list">
				<li class="dd-item" data-id="13">
					<div class="dd-handle">Item 13</div>
				</li>
				<li class="dd-item" data-id="14">
					<div class="dd-handle">Item 14</div>
				</li>
				<li class="dd-item" data-id="15">
					<div class="dd-handle">Item 15</div>
					<ol class="dd-list">
						<li class="dd-item" data-id="16"><div class="dd-handle">Item
								16</div></li>
						<li class="dd-item" data-id="17"><div class="dd-handle">Item
								17</div></li>
						<li class="dd-item" data-id="18"><div class="dd-handle">Item
								18</div></li>
					</ol>
				</li>
			</ol>
		</div>

	</div>

	<p>
		<strong>Serialised Output (per list)</strong>
	</p>

	<textarea id="nestable-output"></textarea>
	<textarea id="nestable2-output"></textarea>

	<p>&nbsp;</p>

	<div class="cf nestable-lists">

		<p>
			<strong>Draggable Handles</strong>
		</p>

		<p>If you're clever with your CSS and markup this can be achieved
			without any JavaScript changes.</p>

		<div class="dd" id="nestable3">
			<ol class="dd-list">
				<li class="dd-item dd3-item" data-id="13">
					<div class="dd-handle dd3-handle">Drag</div>
					<div class="dd3-content">Item 13</div>
				</li>
				<li class="dd-item dd3-item" data-id="14">
					<div class="dd-handle dd3-handle">Drag</div>
					<div class="dd3-content">Item 14</div>
				</li>
				<li class="dd-item dd3-item" data-id="15">
					<div class="dd-handle dd3-handle">Drag</div>
					<div class="dd3-content">Item 15</div>
					<ol class="dd-list">
						<li class="dd-item dd3-item" data-id="16">
							<div class="dd-handle dd3-handle">Drag</div>
							<div class="dd3-content">Item 16</div>
						</li>
						<li class="dd-item dd3-item" data-id="17">
							<div class="dd-handle dd3-handle">Drag</div>
							<div class="dd3-content">Item 17</div>
						</li>
						<li class="dd-item dd3-item" data-id="18">
							<div class="dd-handle dd3-handle">Drag</div>
							<div class="dd3-content">Item 18</div>
						</li>
					</ol>
				</li>
			</ol>
		</div>

	</div>

	<p class="small">
		Copyright &copy; <a href="http://dbushell.com/">David Bushell</a> |
		Made for <a href="http://www.browserlondon.com/">Browser</a>
	</p>

	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="jquery.nestable.js"></script>
	<script>

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);
    
    // activate Nestable for list 2
    $('#nestable2').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    updateOutput($('#nestable2').data('output', $('#nestable2-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

    $('#nestable3').nestable();

});
</script>
</body>
</html>